<template>
	<view class="farm">
		<view class="bottom">
			<view class="vfor" v-for="(v,i) in list" :key="i" @click="navTo('/pages/user/taskDetail?id='+v.id)">
				<view class="df detail">
					<view class="image">
						<image :src="v.picUrl" mode="" class="image"></image>
					</view>
					<view class="right">
						<view class="com df">
							<view class="tt">下发时间：</view>
							<view class="content">{{v.taskIssueTime}}</view>
						</view>
						<view class="com df">
							<view class="tt">任务类型：</view>
							<view class="content">{{v.taskType}}</view>
						</view>
						<view class="com df">
							<view class="tt">状态：</view>
							<view class="content">{{v.state == 0 ? "未完成":"已完成"}}</view>
						</view>
					</view>
				</view>
				<view class="btn"  @click.stop="callTheOperator">联系操作员</view>
			</view>
		</view>
		<view style="height: 200rpx;"></view>
		<view>
			<navigator open-type="navigate" :url="`/pages/user/addTask?landId=${landId}&landMsgId=${landMsgId}&VarietyId=${VarietyId}`">
				<button class="bottom-btn">新增任务</button>
			</navigator>
		</view>
	</view>
</template>

<script>
	import {taskList} from "@/api/api.js"
	export default {
		data() {
			return {
				list: [
					{
						src: require('../../static/indexBg.png'),
						time: '2022-09-09 13:33:22',
						type: '整地',
						status:'未完成',
						id:333
					},
					{
						src: require('../../static/indexBg.png'),
						time: '2022-09-09 13:33:22',
						type: '整地',
						status:'完成',
						id:4444
					},
				],
				landMsgId:'',
				landId:'',
				VarietyId:'',
				operatorPhone:'',
			}
		},
		onLoad(routerParams) {
			console.log("路由参数：",routerParams);
			this.landMsgId = routerParams.landMsgId
			this.landId = routerParams.landId
			this.VarietyId = routerParams.VarietyId
			this.getTaskList()
		},
		methods: {
			callTheOperator(){
				if(!this.operatorPhone){
					uni.$u.toast('当前任务没有操作员电话')
					return
				}
				uni.makePhoneCall({
					phoneNumber:this.operatorPhone,
					success: (res) => {
						console.log('拨打电话：',res);
					}
				})
			},
			async getTaskList(){
				uni.showLoading({
					mask:true,
					title:''
				})
				let query = `landMsgId=${this.landMsgId}`
				const res = await taskList(query)
				console.log('当前地块任务列表：',res);
				if(res?.data.code == 200){
					this.list = res.data.data.data
					this.operatorPhone = res.data.data.operatorPhone
					uni.hideLoading()
				}else{
					uni.hideLoading()
					uni.showToast({
						title:"获取任务列表失败",
						icon:'error'
					})
				}
			},
			navTo(url){
				uni.navigateTo({
					url:url,
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.farm {
		position: relative;
		.bottom-btn{
			background-color: #17CC77;
			color: #FFFFFF;
			width:400rpx;
			position: absolute;
			bottom: 80rpx;
			left: calc(50% - 200rpx);
			&:active{
				opacity: .8;
			}
		}
		.btn {
			padding: 0 40rpx;
			float: right;
			margin-top: 20rpx;
			width: 188rpx;
			height: 60rpx;
			background: #17CC77;
			border-radius: 8rpx;
			border: 2rpx solid #17CC77;
			text-align: center;
			line-height: 60rpx;
			color: #FFFFFF;
		}
		.df {
			display: flex;
		}
		.bottom {
			padding: 20rpx 30rpx;

			.vfor {
				margin-bottom: 20rpx;
				overflow: hidden;
				background: #FFFFFF;
				padding: 35rpx 20rpx 20rpx;

				.title {
					font-size: 30rpx;
					color: #282828;
					margin-bottom: 42rpx;
					font-weight: bold;
				}

				.detail {
					padding-bottom: 20rpx;
					border-bottom: 1rpx solid rgba(0, 0, 0, 0.12);

					.image {
						width: 290rpx;
						height: 200rpx;
						border-radius: 20rpx;
						margin-right: 26rpx;
					}


					.right {
						padding-top: 23rpx;

						
					}
				}


				.com {
					font-size: 26rpx;
					margin-bottom: 20rpx;

					.tt {
						color: rgba(68, 78, 104, 0.7);
						white-space: nowrap;
						text-align-last: justify;
						width: 130rpx;
					}

					.content {
						color: #1D1D1D;
						text-align: left;
					}
				}
			}
		}
	}
</style>